<!--
 * @Author: lsmi
 * @Date: 2021-06-08 20:33:28
 * @LastEditors: lsmi
 * @LastEditTime: 2021-12-01 20:36:40
 * @FilePath: \v2_play_js\src\views\Home.vue
-->
<template>
  <div class="home">
    <button class="btn-test">按钮</button>
    <div
      class="bg-gradient-to-r from-orange-400 via-red-500 to-pink-500 h-20"
    ></div>
    <button class="ring-4 ring-yellow-500 ring-opacity-50">Button</button>
    <div class="" style="display: flex">
      <div style="width: 300px" class="border-black border-2 bg-rose-400">
        1
      </div>
      <div style="width: 300px; flex-shrink: 2" class="bg-blue-300">2</div>
      <div style="width: 300px" class="border-black border-2 bg-rose-400">
        3
      </div>
    </div>
    <input
      class="
        border border-transparent
        focus:outline-none
        focus:ring-2
        focus:ring-purple-600
        focus:border-transparent
      "
      type="text"
      placeholder="输入内容"
    />
    <el-input class="w-56" />
    <el-button>按钮</el-button>
    <div class="home-text">文本11</div>
    <div class="test-flex">
      <div
        class="font-source slashed-zero text-3xl text-center text-emerald-600"
      >
        0
      </div>
      <div class="text-lg">1<span class="ordinal">sp</span></div>
      <div class="ordinal">1pp</div>
      <p
        class="
          font-source
          diagonal-fractions
          text-3xl text-center text-emerald-600
        "
      >
        1/2 3/4 5/6
      </p>
      <p
        class="
          font-ubuntu-mono
          stacked-fractions
          text-3xl text-center text-blue-600
        "
      >
        1/2 3/4 5/6
      </p>
    </div>
    <div class="mt-3">
      <div
        class="p-3 bg-green-400 mb-3"
        v-for="(item, index) in infoData.listData.list"
        :key="index"
      >
        {{ item.title }}
        <div class="text-sm cursor-pointer">编辑</div>
        <el-button @click="addAction(item)" size="mini">添加</el-button>
        <div v-if="item.descList.length">length</div>
      </div>
    </div>
    <div>
      <div v-for="(item, index) in testList" :key="index">
        {{ item.title }}
        <div v-if="item.descList.length">length</div>
        <el-button size="mini" @click="add2Action(item)">添加</el-button>
      </div>
    </div>
  </div>
</template>

<script>
const resData = {
  list: [
    {
      title: "xx",
    },
    {
      title: "00",
    },
  ],
  pageInfo: {},
};
import axios from "axios";
import $ from "jquery";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      infoData: {
        listData: {
          list: [],
          pageInfo: {},
        },
      },
      testList: [],
    };
  },
  created() {
    resData.list.map((t) => {
      t.descList = [];
      return t;
    });
    this.infoData.listData = resData;
    // this.infoData.listData.list = this.infoData.listData.list.map((t) => {
    //   t.descList = [];
    //   return t;
    // });
    const testList = [{ title: "xx" }];
    this.testList = testList;
    this.testList.map((t) => {
      this.$set(t, "descList", []);
      // t.descList = [];
    });
    setTimeout(() => {
      this.getPointAction();
    }, 2000);
  },
  methods: {
    getPointAction() {
      // axios({
      //   url: "https://apis.map.qq.com/ws/geocoder/v1/",
      //   params: {
      //     location: "39.984154,116.307490",
      //     key: "NE7BZ-B5R6V-UT5PK-U56XN-DVVWH-GZBGV",
      //     get_poi: 1,
      //     output: "jsonp",
      //     callback: "qqMap",
      //   },
      // }).then((res) => {
      //   console.log(res, "res");
      // });
      this.$jsonp("https://apis.map.qq.com/ws/geocoder/v1/", {
        location: "39.984154,116.307490",
        key: "NE7BZ-B5R6V-UT5PK-U56XN-DVVWH-GZBGV",
        get_poi: 1,
        output: "jsonp",
      }).then((res) => {
        console.log(res, "res");
      });
    },
    addAction(item) {
      item.descList = [
        {
          ip: "0",
        },
      ];
    },
    add2Action(item) {
      item.descList = [{ ip: 30 }];
    },
  },
};
</script>
<style lang="scss" scoped>
.home-text {
  @apply align-baseline text-base text-center text-gray-400 font-bold
   bg-gray-100 hover:text-purple-600 transform-gpu sm:w-36;
}
.btn-test {
  border: none;
  margin-right: 10px;
  background: theme("colors.lightBlue.600");
  // @apply py-2 px-4 bg-blue-400 text-white
  //  font-semibold rounded-lg shadow-md hover:bg-indigo-700
  //   focus:outline-none focus:ring-2 focus:ring-indigo-400
  //    focus:ring-opacity-75;
}
.test-flex {
  padding: 50px;
  box-sizing: border-box;
  border-radius: 12px;
  height: 500px;
  border: 1px solid #abcdef;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  // @apply flex-wrap;
  div {
    padding: 10px;
    width: 50px;
    height: 50px;
    border: 1px solid;
    margin: 0 20px;
  }
}
</style>
